<template>
    <div class="app-container">
        <div class="filter-container">
            <el-button class="filter-item" @click="add" type="primary" icon="el-icon-plus">添加角色</el-button>
        </div>
        <el-table :data="list"  border fit highlight-current-row style="width:700px" >
         
            <el-table-column align="center" label="序号" width="115" type="index" >

            </el-table-column>
            
            <el-table-column align="center" label="角色名称">
                <template slot-scope="scope">
                <span class="textdic">{{scope.row.roleName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                <span class="textdic">{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                <el-button type="primary" size="mini" @click="handleRemove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="编辑角色" :visible.sync="Visible">
            <el-form :model="form2">
               <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form2.roleName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="拥有菜单" :label-width="formLabelWidth">
                    <el-tree
                    :data="columndata"
                    show-checkbox
                    node-key="menuId"
                    ref="tree2"
                    highlight-current
                    default-expand-all
                    :props="defaultProps"
                    >
                    </el-tree>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visible = false">取 消</el-button>
                <el-button type="primary" @click="btn2(form.id)">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="创建角色" :visible.sync="Visibleadd">
            <el-form :model="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.roleName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="拥有菜单" :label-width="formLabelWidth">
                    <el-tree
                    :data="columndata"
                    show-checkbox
                    node-key="menuId"
                    ref="tree1"
                    highlight-current
                    default-expand-all
                    :props="defaultProps"
                    >
                    </el-tree>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visibleadd = false">取 消</el-button>
                <el-button type="primary" @click="btn1(form.id)">确 定</el-button>
            </div>
        </el-dialog>
        <div class="pagination-container" style="float:left">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.current" :page-sizes="[5,10,20,30,40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      Visible: false,
      Visibleadd: false,
      list: [],
      roleId: '',
      menuIds:'',
      columndata:[],
      defaultProps: {
        children: 'childMenus',
        label: 'menuName'
        },
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        productName: undefined
      },
      formLabelWidth: '120px',
      form: {
        id: '',
        roleName: ''
      },
      form2: {
        id: '',
        roleName: ''
      }
    }
  },
  created() {
    this.getList()
    this.getMenuList()
  },
  methods: {
    getList() {
      var that = this
      that.$post({
            api: "/role/listRoles",
        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data
            that.total = data.data.length
        }
        console.log("holdManage",data)
        });
    },
    getRolesMenuList(){
       var that = this
      that.$post({
            api: "/role/getRolesMenuList",
            data: {
               accountId: ''
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data
            that.total = data.data.length
        }
        console.log("holdManage",data)
        });
    },
    getMenuList() {
      var that = this
      that.$post({
            api: "/menu/rolesMenuList",
        }).then(({ data }) => {
        if(data.code === 0){
            that.columndata = data.data[0].childMenus
        }
        console.log("holdManage",data)
        });
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    handleUpdate(row) {
      this.Visible = true;
      this.roleId = row.id;
      this.form2.roleName = row.roleName;
      this.menuIds = '';
      // this.$refs.tree.setCheckedKeys([]);
      var that = this
      that.$post({
            api: "/role/getRolesMenuList",
            data: {
              rolesId: row.id
            }
        }).then(({ data }) => {
        if(data.code === 0){
          var arr = []
          arr = data.data
          var arr2 = []
          for (var i = 0; i < arr.length; i++) {
            arr2[i] = parseInt(arr[i].menuId)
          }
          console.log("测试",arr2)
          that.$refs.tree2.setCheckedKeys(arr2)
        }
        
        });
         
    },
    add(){
      this.Visibleadd = true
      this.menuIds = ''
    },
    btn1(id) {
      this.Visibleadd = false
      //  var arr1 = [...this.$refs.tree1.getCheckedNodes(), ...this.$refs.tree1.getHalfCheckedNodes()]
       var arr1 = this.$refs.tree1.getCheckedNodes()
      //  console.log(arr1)
        var arr2 = []
        for (let i = 0; i < arr1.length; i++) {
          arr2[i] = arr1[i].menuId 
        }
         for (var j = 0; j < arr2.length; j++) {
         this.menuIds = this.menuIds + arr2[j] + ','
      }
      this.menuIds = this.menuIds + '1'
     var that = this
      that.$post({
            api: "/role/addRoles",
            data: {
               roleName: that.form.roleName,
               menuIds: that.menuIds
            }

        }).then(({ data }) => {
        if(data.code === 0){
           that.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
            that.getList();
            that.form.roleName = ''
        }else {
            this.$message({
              type: "error",
              message: data.msg
            });
            that.getList();
          }
        console.log("listSysUser",data)
      });
      that.form.roleName = ''
      that.$refs.tree1.setCheckedKeys([]);
    },
    btn2(id) {
      this.Visible = false
      // var arr1 = [...this.$refs.tree2.getCheckedNodes(), ...this.$refs.tree2.getHalfCheckedNodes()]
      var arr1 = this.$refs.tree2.getCheckedNodes()
      // console.log(arr1)
        var arr2 = []
        for (let i = 0; i < arr1.length; i++) {
          arr2[i] = arr1[i].menuId 
        }
         for (var j = 0; j < arr2.length; j++) {
        this.menuIds = this.menuIds + arr2[j] + ','
      }
        this.menuIds = this.menuIds + '1'
      var that = this
      that.$post({
            api: "/role/updateRoles",
            data: {
              roleName: that.form2.roleName,
              menuIds: that.menuIds,
              roleId: that.roleId,
              dataFlag: 1
            }
        }).then(({ data }) => {
        if(data.code === 0){
           that.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
             that.getList();
        }else {
            this.$message({
              type: "error",
              message: data.msg
            });
             that.getList();
          }
        console.log("listSysUser",data)
      });
     that.form.roleName = ''
    },
    handleRemove(row) {
      var that = this
      that.$confirm('你确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var roleId = row.id
         that.$post({
            api: "/role/updateRoles",
            data: {
               roleId: roleId,
               dataFlag: -1
            }
        }).then(({ data }) => {
          if(data.code === 0){
            that.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            that.getList()
          }else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        })
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>